<template>
  <div class="search-hot">
    <div class="search-hot-header">
      <span class="search-hot-title">热门搜索</span>
    </div>
    <div class="search-hot-content">
      <div v-for="(hot, key) in list" :key="key" class="search-hot-type">
        <div v-if="type === '1'" class="search-hot-type-title">{{ key | houseType }}</div>
        <ul class="search-hot-type-list">
          <li v-for="item in hot" :key="item.id" class="search-hot-item" @click="toList(item)">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotSearch } from '@/api/search/house'
export default {
  filters: {
    houseType(type) {
      const typeMap = {
        '1': '综合',
        '2': '新房',
        '3': '二手房',
        '4': '商用房',
        '5': '装修'
      }
      return typeMap[type]
    }
  },
  props: {
    type: {
      type: [String],
      default() {
        return '1'
      }
    }
  },
  data() {
    return {
      list: {}
    }
  },
  created() {
    this.getHot()
  },
  methods: {
    async getHot() {
      const { data } = await getHotSearch({ type: this.type })
      this.list = data
    },
    toList(item) {
      this.$router.push({ name: 'HouseList', query: { name: item.name, type: this.type } })
    }
  }
}
</script>

<style scoped lang="less">
.search-hot {
  padding: 0 @padding-15;
  .search-hot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: @font-size-15;
    font-weight: @font-weight-bold;
    height: @header-height;
  }
  .search-hot-item {
    display: inline-block;
    color: @gray-7;
    font-size: @font-size-13;
    line-height: @line-height-1;
    padding: 10px 15px;
    border: @border-width-base solid @border-color;
    border-radius: @border-radius-sm;
    margin-right: 7px;
    margin-bottom: 11px;
  }
  .search-hot-type {
    .search-hot-type-title {
      color: @gray-6;
      font-size: @font-size-13;
      line-height: 24px;
    }
  }
}
</style>
